<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="${pageContext.request.contextPath }/frame/layui/css/layui.css">

</head>
<body>
	<div class="layui-elem-quote layui-form ">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">员工姓名:</label>
			<div class="layui-input-inline">
				<input type="text" autocomplete="off" placeholder="请输入姓名"
					class="layui-input" id="search_name">
			</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">部门:</label>
				<div class="layui-input-inline">
					<select id="search_dept" lay-filter="search_dept" lay-search="">
						<option value="">--请选择--</option>
						<option value="-1">待议</option>
					</select>
				</div>
			</div>
			
			<div class="layui-inline">
				<button id="select_bt" class="layui-btn mgl-20">查询</button>
			</div>
		</div>
	</div>
	<!-- 表格 -->
	<table id="emp_table" class="layui-table" lay-filter="emp_table"></table>
<script type="text/javascript" src="${pageContext.request.contextPath}/frame/layui/layui.js"></script>
<script> 
	layui.use([ 'element', 'table', 'jquery', 'layer', 'form' ],
		function() {
			var $ = layui.jquery,
			table = layui.table, 
			element = layui.element,
			layer = layui.layer, 
			form = layui.form;
	
			// 表格渲染
			var tableIns = table.render({
				elem : '#emp_table' //指定原始表格元素选择器（推荐id选择器）
				,height : 500 //容器高度
				,cols : [ [//标题栏
				{
					checkbox : true,
					sort : true,
					fixed : true,
					space : true
				}, {
					field : 'eid',
					title : '编号',
					align : 'center',
					width : 60
				}, {
					field : 'ename',
					title : '员工名称',
					align : 'center',
					width : 100
				}, {
					field : 'dept',
					title : '所在部门',
					align : 'center',
					width : 100,
					toolbar : '#deptTel'
				}, {
					field : 'loginname',
					title : '登录名',
					align : 'center',
					width : 100
				}, {
					field : 'pwd',
					title : '登录密码',
					align : 'center',
					width : 100
				}, {
					field : 'sex',
					title : '员工性别',
					align : 'center',
					width : 100,
					toolbar : '#deptsex'
				}, {
					field : 'eimg',
					title : '员工头像',
					width : 100,
					align : 'center',
					templet : '#imgtmplet'
				}, {
					field : 'eflag',
					title : '员工类别',
					align : 'center',
					width : 100,
					toolbar : '#flagTel'
				}, {
					field : 'eadmin',
					title : '权限类别',
					align : 'center',
					width : 100,
					toolbar : '#adminTel'
				},{
					field : 'eis',
					title : '状态',
					align : 'center',
					width : 100,
					toolbar : '#isTel'
				}
				] ],
				id : 'queryemp'
				,url : '${pageContext.request.contextPath }/empAction_pageQuery.action'
				,method : 'post'
				,page : true
				,limits : [ 10, 20, 30 ]
				,limit : 10 //默认采用30
				,loading : false
			});
			//发送请求数据 获取数据 添加到部门的select 标签里面
			var url = "${pageContext.request.contextPath }/deptAction_findNoAllDept.action";
			//查询没有被关联的客户
			$.post(url,{},function(data,status){
				//$("#search_dept").append("");
				//循环数组
				for(var i = 0 ;i<data.length;i++){
					//获取id name
					var id = data[i].did;
					var name = data[i].dname;
					
					$("#search_dept").append("<option value = "+id+">"+name+"</option>");
					form.render();
				}
			});
			
			//查询姓名
			$("#select_bt").click(function() {
				var empname = $("#search_name").val();
	            tableIns.reload({
	            	url: '${pageContext.request.contextPath }/empAction_empQuery.action'
	                ,where: {
	                	'ename':empname
	                }
	            });
			});
			form.on('select(search_dept)', function (data) {
				var deptid = $("#search_dept").val();
				tableIns.reload({
	            	url: '${pageContext.request.contextPath }/empAction_deptQuery.action'
	                ,where: {
	                	'dept.did':deptid
	                }
	            });
	        });
		});
</script>
<%--图片--%>
<script type="text/html" id="imgtmplet">
    {{#  if(d.eimg !== ''){ }}
    <div><img src="{{d.eimg}}" class="layui-circle"
              style=" width: 29px;height: 29px;border: 1px solid plum;padding: 2px;"/></div>;
    {{#  } else { }}
    <div><img src="image/face1.jpg" class="layui-circle"
              style=" width: 29px;height: 29px;border: 1px solid hotpink;padding: 2px;"/></div>;
    {{#  } }}
</script>
<%--性别--%>
<script type="text/html" id="deptsex">
    {{#  if(d.sex === '男'){ }}
    <span style="color: #3523f5;">男<i class="layui-icon">&#xe662;</i></span>
    {{#  } else { }}
    <span style="color: #dd14f5;">女<i class="layui-icon">&#xe661;</i></span>
    {{#  } }}
</script>
<%--员工级别--%>
<script type="text/html" id="flagTel">
    {{#  if(d.eflag === 0 ){ }}
    <span style="color: #000;">普工</span>
    {{#  } else { }}
    <span style="color: #F581B1;">部门主管</span>
    {{#  } }}
</script>
<%--员工操作级别--%>
<script type="text/html" id="adminTel">
    {{#  if(d.eadmin === 0 ){ }}
    <span style="color: #000;">普通操作者</span>
    {{#  } else { }}
    <span style="color: #F581B1;">部门主管</span>
    {{#  } }}
</script>
<%--部门--%>
<script type="text/html" id="deptTel">
    {{#  if(d.dept === null){ }}
    <span style="color: #f5120c;">待议</span>
    {{#  } else { }}
    <span style="color: #000;">{{d.dept.dname}}</span>
    {{#  } }}
</script>
<%--状态--%>
<script type="text/html" id="isTel">
    {{#  if(d.eis === 1){ }}
    <span style="color: #2418f5;">在职</span>
    {{#  } else { }}
    <span style="color: #f5120c;">离职</span>
    {{#  } }}
</script>
</body>
</html>
